<!--
 * @Description: 商家答卷预览
 * @Author: liyujie
 * @Date: 2021/06/05
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/06/05
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!-- header -->
            <div class="header">
                <div class="header-title">
                    当前浏览的答卷商家信息——
                    <span
                        class="shop-info"
                        v-if="formData"
                    >
                        <span class="shop-info-item">店铺名称：{{ formData.shop_title }}</span>
                        <span class="shop-info-item">店铺编号：{{ formData.shop_no }}</span>
                        <span class="shop-info-item">企业名称：{{ formData.company_name }}</span>
                    </span>
                </div>
                <div
                    class="btn-view"
                    v-if="from_type !== 'statistics'"
                >
                    <div
                        class="btn-item"
                        @click="handleChangePage('prev')"
                    >
                        上一份问卷
                    </div>
                    <div
                        class="btn-item last"
                        @click="handleChangePage('next')"
                    >
                        下一份问卷
                    </div>
                </div>
            </div>
            <!-- /header -->
            <div
                class="form-wrapper"
                v-if="formData"
                v-loading="loading"
            >
                <div class="question-header">
                    <div class="title">{{ formData.title }}</div>
                    <div class="intro">{{ formData.intro }}</div>
                </div>
                <div class="question-form">
                    <custom-form-data
                        :data="formData.form_config_with_data"
                        from-type="shop"
                    />
                </div>
                <div class="question-footer">
                    <el-button
                        size="medium"
                        style="width: 120px"
                        @click="$router.go(-1)"
                    >
                        返回
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import { deepClone } from "@/assets/js/utils";
import CustomFormData from "@/components/shop-questionnaire/custom-form-data";

export default {
    name: 'ShopQuestionnaireSubmitDetail',
    mixins: [back],
    components: {CustomFormData},
    data() {
        return {
            sq_no: '',
            id: '',
            // statistics来自统计
            from_type: '',
            // 预览数据
            formData: null,
            loading: false,
            filterData: {},
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            index: 0
        };
    },
    computed: {},
    watch: {},
    filters: {},
    async mounted() {
        let query = this.$route.query;

        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'},
            {title: '商家问卷', path: '/student/shop-questionnaire-list'},
            {title: '查看商家问卷', path: `/student/shop-questionnaire-submit-list?sq_no=${query.sq_no}`},
            {title: '查看详情'}]);
        this.authResult = this.$route.meta.authResult;
        this.id = query.id;
        this.from_type = query.from_type;
        if(!query.from_type) {
            this.filterData = JSON.parse(query.filter_data);
            this.page.now_page = query.now_page;
            this.index = query.index;
            await this.getTableData();
        }
        this.formData = await this.getDetailData(this.id);
    },

    methods: {
        /**
         * @description 获取数据
         */
        getDetailData(id) {
            this.loading = true;
            let params = { id };

            return new Promise(resolve => {
                this.$post('/student/shop_questionnaire%5Cget_submit_detail', params, res => {
                    if (res.code === 1) {
                        resolve(res.data);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                    this.loading = false;
                });
            });

        },

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {
            let params = { ...this.filterData };

            params.page_id = this.page.now_page;
            return new Promise(resolve => {
                this.$post('/student/shop_questionnaire%5Cget_shop_submit_list', params, res => {
                    if (res.code === 1) {
                        this.tableData = res.data.list;
                        this.page = res.data.page;
                        resolve(res.data);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                });
            });

        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 切换数据
         * @param type prev上一条 next下一条
         */
        async handleChangePage(type) {
            // 下一条
            if(type === 'next') {
                // 到达每页最后一条 并且有下一页
                if(this.index === (this.page.page_end - this.page.page_start - 1)) {
                    if(!this.page.next_page) {
                        this.$message.warning('这已经是最后一份答卷了！');
                        return;
                    }
                    this.page.now_page = this.page.next_page;
                    this.index = 0;
                    await this.getTableData();
                } else {
                    this.index++;
                }
            }

            // 上一条
            if(type === 'prev'){
                // 到达每页第一条 并且有上一页
                if(this.index === 0) {
                    if(!this.page.pre_page) {
                        this.$message.warning('这已经是第一份答卷了！');
                        return;
                    }
                    this.page.now_page = this.page.pre_page;
                    this.index = this.page.page_size - 1;
                    await this.getTableData();
                } else {
                    this.index--;
                }
            }

            this.formData = await this.getDetailData(this.tableData[this.index].id);
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;
    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;

        /*header*/
        .header {
            height: 64px;
            padding: 10px 24px 10px 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            border-bottom: 1px solid #F0F2F7;
            .header-title {
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                .shop-info {
                    color: #2FBDB3;
                    margin-left: 6px;
                    &-item {
                        margin-right: 24px;
                    }
                }
            }
            .btn-view {
                display: flex;
                height: 100%;
                .btn-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 24px;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #666666;
                    border-right: 1px solid #F0F2F5;
                    cursor: pointer;
                    &:hover {
                        color: #1890FF;
                        transition: all .2s;
                    }
                    &.last {
                        border: 0;
                        padding-right: 12px;
                    }
                }
            }
        }
    }
    .form-wrapper {
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }
        .question-header {
            padding: 24px 0;
            border-bottom: 1px dashed #DCDFE6;
            .title {
                font-size: 24px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                text-align: center;
            }
            .intro {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-top: 24px;
                text-align: center;
                line-height: 24px;
            }
        }
        .tips-view {
            height: 48px;
            background: #FFF3E8;
            padding: 0 165px;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #F79038;
        }
        .question-form {
            padding: 32px 165px 0;
        }
        .question-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 52px;
        }
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-textarea__inner {
        resize: none;
    }
    /deep/ .el-table__fixed-right {
        right: 6px!important;
    }
}
</style>
